<template>
  <div class="map-container">
    <!-- 控制按钮组 -->
    <div class="map-controls">
      <button
        class="control-btn detain-btn"
        :class="{ active: currentMode === 'detain' }"
        @click="handleDetain">
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z" />
        </svg>
        收押
      </button>
      <button
        class="control-btn transfer-btn"
        :class="{ active: currentMode === 'transfer' }"
        @click="handleTransfer">
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" />
        </svg>
        分流
      </button>
    </div>
    <div id="map" class="map-canvas"></div>
    <!-- <dv-decoration-5 style="width:100%;height:40px;margin: 0 auto;" :dur="3" /> -->

  </div>
</template>

<script>
import { Scene, PolygonLayer, LineLayer, PointLayer, TextLayer } from '@antv/l7'
import { Map } from '@antv/l7-maps'
import anhuiData from '@/const/json/anhui.json'
import { mapGetters } from 'vuex'

export default {
  name: 'MapView',
  props: {
    // 控制飞线显示
    showFlyLines: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapGetters('dataImport', ['getImportedData']),
    // 从 Vuex 获取导入的数据
    importedData() {
      return this.getImportedData
    },
    // 根据导入数据动态生成飞线数据
    dynamicFlyLineData() {
      return this.generateFlyLineData()
    }
  },
  data() {
    return {
      scene: null,
      flyLineLayer: null,
      currentMode: 'detain', // 当前模式：'detain'（收押） 或 'transfer'（分流）
      // 城市坐标数据
      cityCoordinates: {
        '合肥': [117.17, 31.47],
        '芜湖': [118.38, 31.33],
        '蚌埠': [117.39, 32.92],
        '淮南': [116.98, 32.63],
        '马鞍山': [118.51, 31.67],
        '淮北': [116.80, 33.95],
        '铜陵': [117.81, 30.95],
        '安庆': [117.06, 30.51],
        '黄山': [118.33, 29.71],
        '滁州': [118.32, 32.30],
        '阜阳': [115.82, 32.90],
        '宿州': [116.98, 33.63],
        '六安': [116.50, 31.75],
        '亳州': [115.78, 33.84],
        '池州': [117.49, 30.66],
        '宣城': [118.76, 30.95]
      }
    }
  },
  mounted() {
    // 使用$nextTick确保DOM完全渲染后再初始化
    this.$nextTick(() => {
      this.initMap()
    })
  },
  beforeDestroy() {
    if (this.scene) {
      this.scene.destroy()
    }
    if (this.flyLineLayer) {
      this.scene.removeLayer(this.flyLineLayer)
    }
  },
  watch: {
    showFlyLines(newVal) {
      this.toggleFlyLines(newVal)
    },
    // 监听导入数据变化，动态更新飞线
    importedData: {
      handler(newData) {
        console.log('导入数据变化，更新飞线:', newData)
        // 只有在scene初始化完成后才更新飞线
        if (this.scene) {
          this.initFlyLines()
        }
      },
      deep: true
      // 移除immediate: true，避免组件初始化时scene还未准备好
    }
  },
  methods: {
    // 初始化地图
    async initMap() {
      try {
        // 确保DOM元素存在
        const mapContainer = document.getElementById('map')
        if (!mapContainer) {
          console.error('地图容器不存在，延迟初始化')
          // 延迟500ms后重试
          setTimeout(() => {
            this.initMap()
          }, 500)
          return
        }

        // 创建地图场景 - 使用离线地图
        this.scene = new Scene({
          id: 'map',
          map: new Map({
            center: [117.17, 31.47], // 安徽省中心坐标
            zoom: 6,
            pitch: 40,
            // 使用透明背景，不再需要预设样式，由 addAnhuiBoundary 方法处理
          }),
          logoVisible: false,
        })

        // 等待地图加载完成
        await new Promise(resolve => {
          this.scene.on('loaded', resolve)
        })

        //设置倾角
        // this.scene.setPitch(40)


        // 添加安徽省边界图层
        this.addAnhuiBoundary()

        // 初始化飞线（如果有导入数据）
        this.initFlyLines()

        // 默认显示收押飞线数据
        setTimeout(() => {
          this.showDetainFlyLines()
        }, 1000)

        console.log('安徽省地图初始化完成')
      } catch (error) {
        console.error('地图初始化失败:', error)
        // 如果地图初始化失败，清理资源并重试
        if (this.scene) {
          this.scene.destroy()
          this.scene = null
        }
        setTimeout(() => {
          this.initMap()
        }, 1000)
      }
    },

    // 添加安徽省城市边界
    addAnhuiBoundary() {
      // 使用本地集成的安徽省地理数据
      const geoData = anhuiData;
      console.log(geoData)
      // 省份层
      const provinceLayer = new PolygonLayer({})
        .source(geoData)
        .color('#00ffff')
        .style({
          opacity: 0.8
        })

      // 边界线层 - 显示城市划分
      const cityLineLayer = new LineLayer({zIndex:1})
        .source(geoData)
        .shape('line')
        .size(.5)
        .color('#fff')
        .style({
          opacity: 0.8,
        });

        // 显示文字标签 - 使用PointLayer
        const labelData = geoData.features.map(item => ({
          name: item.properties.name.replace('市', '监狱').replace('合肥监狱', '合肥潜川监狱'),
          lng: item.properties.center[0],
          lat: item.properties.center[1]
        }))

        const dotPoint = new PointLayer()
        .source(labelData, {
            parser: {
            type: 'json',
            x: 'lng',
            y: 'lat',
            },
        })
        .shape('circle')
        .color('#ffed11')
        .animate(true)
        .size(40);
        console.log('标签数据:', labelData)

        const labelLayer = new PointLayer({ zIndex: 2 })
        .source(labelData, {
          parser: {
            type: 'json',
            x: 'lng',
            y: 'lat'
          }
        })
        .shape('name', 'text')
        .size(14)
        .color('#ffffff')
        .style({
          textAnchor: 'center',
          textOffset: [0, 0],
          stroke: '#000000',
          strokeWidth: 2,
          fontFamily: 'Microsoft YaHei, Arial, sans-serif',
          // fontWeight: 'bold',
          textAllowOverlap: false,
          textIgnorePlacement: false
        })

        console.log('文字图层:', labelLayer)
        this.scene.addLayer(labelLayer)
        this.scene.addLayer(provinceLayer)
        this.scene.addLayer(cityLineLayer)
        this.scene.addLayer(dotPoint)
      },

    // 初始化飞线动画
    initFlyLines() {
      if (!this.showFlyLines || !this.scene) {
        console.log('飞线初始化跳过：showFlyLines=', this.showFlyLines, 'scene=', !!this.scene)
        return
      }

      try {
        // 创建流星纹理
        //  this.scene.addImage(
        //   'plane',
        //   'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg',
        // );

        this.scene.addImage(
        'arrow',
        'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
      );

      // 使用动态飞线数据
      const flyLineData = this.dynamicFlyLineData

      // 如果没有数据，不创建飞线图层
      if (!flyLineData || flyLineData.length === 0) {
        console.log('没有飞线数据，跳过初始化')
        return
      }

      // 创建飞线图层
      // this.flyLineLayer = new LineLayer({ blend: 'normal' })
      // .source(flyLineData, {
      //   parser: {
      //     type: 'json',
      //     x:'x',
      //     y:'y',
      //     x1:'x1',
      //     y1:'y1',
      //   }
      // })
      // .shape('arc')
      // .color('#ff6b34')
      // .texture('plane')
      // .size(15)
      // .animate({
      //   // enable: true,     // 开启动画
      //   interval: 1,    // 间隔
      //   trailLength: 1, // 流线长度
      //   duration: 0.4     // 持续时间
      // })
      // .style({
      //   lineTexture: true, // 开启线的贴图功能
      //   iconStep: 6, // 设置贴图纹理的间距
      //   textureBlend: 'replace', // 设置纹理混合方式，默认值为 normal，可选值有 normal/replace 两种
      //   thetaOffset: 1,
      //   opacity: 1,
      //   // blur: 10,
      // });

      const flyLine2 = new LineLayer()
      .source(flyLineData, {
        parser: {
          type: 'json',
          x:'x',
          y:'y',
          x1:'x1',
          y1:'y1',
        },
      })
      .shape('arc')
      .size(3)
      .texture('arrow')
      .animate({
        interval: 0.1, // 间隔
          duration: 0.5, // 持续时间，延时
          trailLength: 0.3, // 流线长度
      })
      .color('rgb(22,119,255)')
      .style({
        opacity: 0.6,
        lineTexture: true, // 开启线的贴图功能
        iconStep: 10, // 设置贴图纹理的间距
        borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
        borderColor: '#fff', // 默认为 #ccc
      });;
        this.scene.addLayer(flyLine2)
        // this.scene.addLayer(this.flyLineLayer)

        console.log('飞线图层已创建，数据条数:', flyLineData.length)

        this.processDataSequentially(this.importedData)
      } catch (error) {
        console.error('初始化飞线失败:', error)
        // 清理可能存在的图层
        if (this.flyLineLayer) {
          try {
            this.scene.removeLayer(this.flyLineLayer)
          } catch (e) {
            console.warn('清理飞线图层失败:', e)
          }
          this.flyLineLayer = null
        }
      }
    },

    // 生成飞线数据
    generateFlyLineData() {
      if (!this.importedData || this.importedData.length === 0) {
        console.log('没有导入数据，使用默认飞线数据')
        // 如果没有导入数据，返回[]
        return []
      }

      // 根据导入的数据生成飞线数据
      const flyLineData = []
      this.importedData.forEach(data => {
        // 检查是否有坐标信息
        if (data.sourceLng && data.sourceLat && data.targetLng && data.targetLat) {
          flyLineData.push({
            x: data.sourceLng,     // 出发经度
            y: data.sourceLat,     // 出发纬度
            x1: data.targetLng,    // 目标经度
            y1: data.targetLat,    // 目标纬度
            value: data.flowValue || 100,  // 流量值
            flowType: data.flowType || 'normal'  // 流量类型
          })
        } else {
          console.warn('数据缺少坐标信息:', data)
        }
      })

      console.log('生成飞线数据:', flyLineData.length, '条')
      return flyLineData
    },

    // 更新飞线
    updateFlyLines() {
      if (!this.scene) return

      // 移除现有的飞线图层
      if (this.flyLineLayer) {
        this.scene.removeLayer(this.flyLineLayer)
        this.flyLineLayer = null
      }

      // 如果需要显示飞线，重新初始化
      if (this.showFlyLines) {
        this.initFlyLines()
      }
    },

    // 切换飞线显示
    toggleFlyLines(show) {
      if (show) {
        // 显示飞线
        this.updateFlyLines()
      } else {
        // 隐藏飞线
        if (this.flyLineLayer) {
          this.scene.removeLayer(this.flyLineLayer)
          this.flyLineLayer = null
        }
      }
    },

    // 重置地图视图
    resetMap() {
      if (this.scene) {
        this.scene.getMapService().fitBounds([
          [114.8, 29.5], // 西南角
          [120.2, 34.6]  // 东北角
        ])
      }
    },

    // 暴露方法给父组件调用
    getScene() {
      return this.scene
    },

    // 逐条处理数据，产生飞线和日志
    async processDataSequentially(data) {
      if (!data || data.length === 0) return

      console.log('开始逐条处理数据，共', data.length, '条')

      // 逐条处理数据
      for (let i = 0; i < data.length; i++) {
        const item = data[i]
        await this.processSingleData(item, i + 1, data.length)
      }

      console.log('所有数据处理完成')
    },

    // 处理单条数据
    async processSingleData(data, index, total) {
      // 添加开始分流的日志
      this.$store.dispatch('logs/addFlowLog', {
        message: `开始 ${data.sourceCity} 到 ${data.targetCity} 分流`,
        sourceCity: data.sourceCity,
        targetCity: data.targetCity,
        flowValue: data.flowValue,
        status: 'start'
      })

      // 创建单条飞线数据
      const flyLineData = [{
        x: data.sourceLng,
        y: data.sourceLat,
        x1: data.targetLng,
        y1: data.targetLat,
        value: data.flowValue || 100,
        flowType: data.flowType || 'normal'
      }]

      // 等待动画完成 (0.4秒动画 + 0.1秒缓冲)
      await new Promise(resolve => setTimeout(resolve, 1000))

      // 添加完成日志
      this.$store.dispatch('logs/addFlowLog', {
        message: `${data.sourceCity} 到 ${data.targetCity} 分流完成`,
        sourceCity: data.sourceCity,
        targetCity: data.targetCity,
        flowValue: data.flowValue,
        status: 'complete'
      })

      // 添加延迟，确保日志顺序显示
      await new Promise(resolve => setTimeout(resolve, 500))
    },

    // 添加动态飞线数据
    addDynamicFlyLine(sourceCity, targetCity, value = 100) {
      if (!this.scene) return

      // 这里可以根据城市名称动态添加飞线
      // 需要城市坐标数据
      console.log('添加动态飞线:', sourceCity, '->', targetCity, 'value:', value)
    },

    // 处理收押按钮点击
    handleDetain() {
      console.log('收押按钮被点击')
      this.currentMode = 'detain' // 设置为收押模式
      // 显示固定城市到合肥的飞线
      this.showDetainFlyLines()
      this.$emit('detain-clicked')
    },

    // 处理分流按钮点击
    handleTransfer() {
      console.log('分流按钮被点击')
      this.currentMode = 'transfer' // 设置为分流模式
      // 显示合肥到固定城市的飞线
      this.showTransferFlyLines()
      this.$emit('transfer-clicked')
    },

    // 显示收押飞线（其他城市到合肥）
    showDetainFlyLines() {
      const detainCities = ['芜湖', '蚌埠', '淮南', '马鞍山', '铜陵', '安庆']
      const flyLineData = []

      detainCities.forEach(city => {
        const coords = this.cityCoordinates[city]
        const hefeiCoords = this.cityCoordinates['合肥']

        if (coords && hefeiCoords) {
          flyLineData.push({
            x: coords[0],     // 出发经度
            y: coords[1],     // 出发纬度
            x1: hefeiCoords[0], // 目标经度（合肥）
            y1: hefeiCoords[1], // 目标纬度（合肥）
            value: Math.floor(Math.random() * 50) + 20, // 随机流量值
            flowType: 'detain'
          })
        }
      })

      this.displayFlyLines(flyLineData)
    },

    // 显示分流飞线（合肥到其他城市）
    showTransferFlyLines() {
      const transferCities = ['黄山', '滁州', '阜阳', '宿州', '六安', '亳州']
      const flyLineData = []

      transferCities.forEach(city => {
        const coords = this.cityCoordinates[city]
        const hefeiCoords = this.cityCoordinates['合肥']

        if (coords && hefeiCoords) {
          flyLineData.push({
            x: hefeiCoords[0], // 出发经度（合肥）
            y: hefeiCoords[1], // 出发纬度（合肥）
            x1: coords[0],     // 目标经度
            y1: coords[1],     // 目标纬度
            value: Math.floor(Math.random() * 50) + 20, // 随机流量值
            flowType: 'transfer'
          })
        }
      })

      this.displayFlyLines(flyLineData)
    },

    // 显示飞线
    displayFlyLines(flyLineData) {
      if (!this.scene || !flyLineData || flyLineData.length === 0) {
        console.log('没有飞线数据或场景未初始化')
        return
      }

      try {
        // 移除现有的飞线图层
        if (this.flyLineLayer) {
          this.scene.removeLayer(this.flyLineLayer)
          this.flyLineLayer = null
        }

        // 创建新的飞线图层
        const flyLine2 = new LineLayer()
          .source(flyLineData, {
            parser: {
              type: 'json',
              x: 'x',
              y: 'y',
              x1: 'x1',
              y1: 'y1',
            },
          })
          .shape('arc')
          .size(3)
          .texture('arrow')
          .animate({
            interval: 0.1,
            duration: 0.5,
            trailLength: 0.3,
          })
          .color('rgb(22,119,255)')
          .style({
            opacity: 0.8,
            lineTexture: true,
            iconStep: 10,
            borderWidth: 0.4,
            borderColor: '#fff',
            cursor: 'pointer',
          })
          // 添加点击事件
          .on('click', (e) => {
            this.showFlyLineTooltip(e)
          })

        this.scene.addLayer(flyLine2)
        this.flyLineLayer = flyLine2

        console.log('固定飞线图层已创建，数据条数:', flyLineData.length)

      } catch (error) {
        console.error('显示飞线失败:', error)
      }
    },

    // 显示飞线点击提示
    showFlyLineTooltip(e) {
      // 根据当前模式显示不同的提示信息
      if (this.currentMode === 'detain') {
        // 收押模式：蚌埠市看守所向潜川监狱第三监区投送165名罪犯
        this.$messageBox.transfer({
          source: '蚌埠市看守所',
          target: '潜川监狱第三监区',
          count: '165名罪犯'
        })
      } else if (this.currentMode === 'transfer') {
        // 分流模式：潜川监狱第四监区向白湖分局滨西监区第二分监区分流80名罪犯
        this.$messageBox.transfer({
          source: '潜川监狱第四监区',
          target: '白湖分局滨西监区第二分监区',
          count: '80名罪犯'
        })
      }

      // 在控制台输出详细信息
      console.log('飞线点击事件:', e, '当前模式:', this.currentMode)
      if (e.feature && e.feature.properties) {
        console.log('飞线数据:', e.feature.properties)
      }
    }
  }
}
</script>

<style scoped>
/* 超级炫酷地图容器样式 */
.map-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 15px;
  background:
    /* 多层炫酷背景 */
    linear-gradient(145deg,
      rgba(0, 255, 255, 0.12) 0%,
      rgba(255, 0, 255, 0.08) 30%,
      rgba(255, 255, 0, 0.06) 70%,
      rgba(0, 255, 0, 0.08) 100%
    ),
    radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.15) 0%, transparent 60%),
    rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  border: 2px solid rgba(0, 255, 255, 0.3);
  backdrop-filter: blur(25px) saturate(1.4);
  box-shadow:
    0 15px 50px rgba(0, 255, 255, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.1),
    0 0 80px rgba(0, 255, 255, 0.15),
    0 0 160px rgba(255, 0, 255, 0.08);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

/* 地图控制按钮组 */
.map-controls {
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background:
    linear-gradient(135deg,
      rgba(0, 255, 255, 0.2) 0%,
      rgba(255, 0, 255, 0.15) 50%,
      rgba(255, 255, 0, 0.1) 100%
    ),
    rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 255, 255, 0.4);
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow:
    0 4px 15px rgba(0, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

.control-btn:hover {
  background:
    linear-gradient(135deg,
      rgba(0, 255, 255, 0.3) 0%,
      rgba(255, 0, 255, 0.2) 50%,
      rgba(255, 255, 0, 0.15) 100%
    ),
    rgba(0, 0, 0, 0.7);
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow:
    0 6px 20px rgba(0, 255, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.control-btn:active {
  transform: translateY(0);
  box-shadow:
    0 2px 10px rgba(0, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.control-btn.active {
  background:
    linear-gradient(135deg,
      rgba(0, 255, 255, 0.6) 0%,
      rgba(0, 255, 255, 0.5) 30%,
      rgba(255, 0, 255, 0.4) 70%,
      rgba(255, 255, 0, 0.3) 100%
    ),
    linear-gradient(135deg,
      rgba(0, 255, 255, 0.8) 0%,
      rgba(0, 255, 255, 0.6) 100%
    ),
    rgba(0, 0, 0, 0.9);
  border: 2px solid rgba(0, 255, 255, 1);
  box-shadow:
    0 12px 35px rgba(0, 255, 255, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    0 0 40px rgba(0, 255, 255, 0.8),
    0 0 80px rgba(0, 255, 255, 0.4),
    0 0 120px rgba(0, 255, 255, 0.2);
  transform: translateY(-3px) scale(1.02);
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(0, 255, 255, 1),
    0 0 16px rgba(0, 255, 255, 0.8),
    0 0 24px rgba(0, 255, 255, 0.6);
  font-weight: 700;
  animation: activePulse 2s ease-in-out infinite;
}

.control-btn.active svg {
  filter:
    drop-shadow(0 0 8px rgba(0, 255, 255, 1))
    drop-shadow(0 0 16px rgba(0, 255, 255, 0.8))
    drop-shadow(0 0 24px rgba(0, 255, 255, 0.6));
  color: #00ffff;
  transform: scale(1.1);
}

@keyframes activePulse {
  0%, 100% {
    box-shadow:
      0 12px 35px rgba(0, 255, 255, 0.6),
      inset 0 2px 0 rgba(255, 255, 255, 0.6),
      0 0 40px rgba(0, 255, 255, 0.8),
      0 0 80px rgba(0, 255, 255, 0.4),
      0 0 120px rgba(0, 255, 255, 0.2);
  }
  50% {
    box-shadow:
      0 12px 35px rgba(0, 255, 255, 0.8),
      inset 0 2px 0 rgba(255, 255, 255, 0.8),
      0 0 50px rgba(0, 255, 255, 1),
      0 0 100px rgba(0, 255, 255, 0.6),
      0 0 150px rgba(0, 255, 255, 0.3);
  }
}

.control-btn svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.5));
}

.detain-btn svg {
  color: #00ff88;
}

.transfer-btn svg {
  color: #0088ff;
}

.map-canvas {
  /* flex: 1; */
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background:
    /* 多层科技感背景 */
    radial-gradient(ellipse at center, rgba(0, 255, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 30% 30%, rgba(255, 0, 255, 0.06) 0%, transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 0, 0.04) 0%, transparent 70%),
    linear-gradient(45deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
  border: 2px solid rgba(0, 255, 255, 0.2);
  box-shadow:
    inset 0 0 80px rgba(0, 255, 255, 0.15),
    inset 0 0 160px rgba(255, 0, 255, 0.08),
    0 0 40px rgba(0, 255, 255, 0.1),
    0 0 80px rgba(255, 0, 255, 0.05);
  backdrop-filter: blur(5px);
}

.map-canvas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(45deg,
      transparent 25%,
      rgba(0, 255, 255, 0.08) 45%,
      rgba(0, 255, 255, 0.15) 50%,
      rgba(0, 255, 255, 0.08) 55%,
      transparent 75%
    ),
    linear-gradient(-45deg,
      transparent 25%,
      rgba(255, 0, 255, 0.08) 45%,
      rgba(255, 0, 255, 0.15) 50%,
      rgba(255, 0, 255, 0.08) 55%,
      transparent 75%
    );
  animation: mapScan 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    inset 0 0 20px rgba(0, 255, 255, 0.1),
    inset 0 0 40px rgba(255, 0, 255, 0.05);
}

@keyframes mapScan {
  0%, 100% { opacity: 0; transform: translateY(-100%); }
  50% { opacity: 1; transform: translateY(100%); }
}

</style>
